<template>
  <a-card title="文件下发" class="setcard">
    <a-modal
      title="选择资源"
      v-model="selectvisible"
      @ok="selectsource"
      width="40%"
    >
      <a-row>
        <a-list :data-source="sources" :pagination="pagination">
          <template #renderItem="source">
            <a-list-item>
              <a-list-item-meta>
                <template #title>
                  <a-checkbox
                    :checked="source.selected"
                    @change="onChange(source)"
                  ></a-checkbox>
                  <img
                    slot="cover"
                    alt="example"
                    :src="source.src"
                    style="margin: 2px"
                    width="30px"
                    height="30px"
                  />
                  <a :href="source.url" target="_blink">{{
                    source.courseName
                  }}</a>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </a-row>
      <template #footer>
        <a-button type="primary" @click="selectsource"> 确定 </a-button>
      </template>
    </a-modal>
    <a-row type="flex" align="middle" justify="start" :gutter="10">
      <a-col>
        <button class="content-btn" @click="selectvisible = true">
          + 从资源库选择
        </button>
      </a-col>
      <a-col>
        <span> 可上传视频,word,pdf,excel,图片等 </span>
      </a-col>
    </a-row>
    <br />
    <a-row>
      <a-card style="padding: 10px">
        <a-list :data-source="selectedsource" v-if="selectedsource.length">
          <a-list-item slot="renderItem" slot-scope="item, index" :id="index">
            <span>
              {{ index + 1 }}.
              {{ item.courseName }}
            </span>
            <template #extra>
              <a-tooltip placement="top">
                <template slot="title">
                  <span>取消选中</span>
                </template>
                <a-button
                  icon="delete"
                  size="small"
                  type="link"
                  @click="deleteit(item)"
                ></a-button>
              </a-tooltip>
            </template>
          </a-list-item>
        </a-list>
        <a-empty v-else />
      </a-card>
    </a-row>
    <br />
    <a-row type="flex" justify="end">
      <a-col>
        <button class="content-btn" @click="node_vote">暂存事件</button>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import { mapState } from "vuex";
const sources = [];
export default {
  props: {
    activityMessage: Object,
  },
  data() {
    return {
      pagination: {
        pageSize: 5,
        showQuickJumper: true,
      },
      sources,
      selectvisible: false,
    };
  },
  computed: {
    selectedsource() {
      // 数据库有数据则加载数据库中数据
      if (
        this.activityMessage.node_contents[0].options.length &&
        this.activityMessage.node_contents[0].options[0] != ""
      ) {
        return this.sources.filter((source) => {
          return (
            this.activityMessage.node_contents[0].options.indexOf(
              source.courseId
            ) > -1
          );
        });
      }
      return this.sources.filter((item) => item.selected);
    },
    ...mapState({
      uid: (state) => state.public.uid,
    }),
    lesson_id() {
      return this.$route.query.lessonId;
    },
  },
  methods: {
    node_vote() {
      try {
        let option = this.selectedsource.map((item) => item.courseId);
        const node_contents = [
          {
            options: option,
            question_type: null,
            right_answer: "",
            title: "",
          },
        ];
        this.$store.commit("teacher/updateNodeContents", node_contents);
        this.$message.info("暂存成功");
      } catch (err) {
        this.$message.error("暂存失败");
      }
    },
    selectsource() {
      this.selectvisible = false;
      // 清空原来数组
      this.activityMessage.node_contents[0].options = [];
      // 将资源id加入数组。。。options
      this.selectedsource.forEach((source) => {
        this.activityMessage.node_contents[0].options.push(source.courseId);
      });
    },
    onChange(course) {
      course.selected = !course.selected;
    },
    deleteit(item) {
      item.selected = !item.selected;
    },
    getResourceIconUrl(rsType) {
      let iconMap = new Map([
        [["mp4"], "video"],
        [["zip", "rar", "7z", "tar", "gz"], "zip"],
        [["doc", "docx"], "word"],
        [["txt"], "txt"],
        [["psd"], "psd"],
        [["ppt", "pptx"], "ppt"],
        [["png"], "png"],
        [["pdf"], "pdf"],
        [["mp3", "wma", "aac", "wav"], "mp3"],
        [["jpeg", "jpg"], "jpg"],
        [["html"], "html"],
        [["gif"], "gif"],
        [["xlsx", "xls"], "excel"],
      ]);
      for (let [suffix, iconName] of iconMap.entries()) {
        if (suffix.some((item) => item === rsType)) {
          return iconName;
        }
      }
      return "white";
    },
  },
  mounted() {
    this.$store
      .dispatch("teacher/getSources", {
        lesson_id: this.lesson_id,
        teacher_id: this.uid,
      })
      .then(() => {
        let selected_IdList = this.$store.getters["teacher/getDocument"];
        this.sources = this.$store.getters["teacher/getSources"].map((item) => {
          let src = this.getResourceIconUrl(item.type);
          return {
            courseId: item.courseId,
            courseName: item.courseName + "." + item.type,
            selected: selected_IdList.some((id) => id === item.courseId),
            url: item.url,
            src: require("@/assets/img/SVGS/" + src + ".svg"),
          };
        });
      });
  },
};
</script>
<style lang="scss">
.ant-card-body {
  padding: 20px;
}
</style>
